<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/base.jspf"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>平台代理详情</title>
<style>
#date1 {
	margin: 2px;
	height: 37px;
}

#date2 {
	margin: 2px;
	height: 37px;
}

.modal-dialog {
	max-width: 1000px;
}

.select-lx {
	margin: 2px;
	height: 37px;
}

.layui-inline {
	height: 100px;
	margin-top: 15px;
}

#userName {
	margin: 2px;
	height: 37px;
}

#daili {
	margin: 2px;
	height: 37px;
}

#table_id_example_paginate {
	margin-right: 100px;
}

.class-input-pageNumber {
	width: 40px;
	height: 23px;
	position: absolute;
	right: 550px;
	top: 12px;
}

.class-span-searchBtn {
	height: 24px;
	width: 36px;
	font-size: 14px;
	text-algin: center;
	line-height: 25px;
	padding: 0 !important;
	position: absolute;
	right: 500px;
	top: 12px;
}

.dataTables_length {
	margin-top: 12px;
	margin-left: 50px;
}

.tableSearch {
	position: relative;
}

.hidden-c {
	display: none;
}

.btn-c-dealShenQing {
	display: none;
}

table th, table tr, table td {
	text-align: center;
	vertical-align: middle;
}
</style>
</head>
<body>
	<div>
		<div>
		变动类型: <select id="btn-xiangqing">
			<option value=''>变动类型</option>
			<option value='1'>用户充值</option>
			<option value='2'>用户提款</option>
			<option value='3'>用户投注</option>
			<option value='4'>其它类型</option>
		</select>
		</div>
		<div>
			<table id="table-i-xiangqing" class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th style="display:none;"></th>
						<th>用户名称</th>
						<th>变动金额</th>
						<th>变动时间</th>
						<th>变动类型</th>
					</tr>
				</thead>
				<tbody> </tbody>
			</table>
		</div>
	</div>
	<script>
	var type = "";
	function getUrlParam(name){
		var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i"); 
		var r =  window.location.search.substr(1).match(reg);
		var strValue = "";
		if (r!=null){
		 strValue= unescape(r[2]);
		}
		return strValue;
	}
		var ids = getUrlParam("ids");
		
		function dataTable01() {
			$("#table-i-xiangqing")
					.DataTable(
							{
								"bProcessing" : false, // 是否显示取数据时的那个等待提示
								"bServerSide" : true,//这个用来指明是通过服务端来取数据
								"bPaginate" : true, //是否显示分页 
								"sAjaxSource" : "/agents/findAgentDetails.do",//这个是请求的地址
								"fnServerData" : retrieveData, // 获取数据的处理函数
								/* 	"destroy":true, */
								// "bPaginate": true,
								"bLengthChange" : true,
								"bSort" : false,
								// "bInfo": true,
								"bAutoWidth" : false,
								//			         "bServerSide":true,
								'aLengthMenu' : [ 5, 10, 20 ],
								"searching" : false,
								/* "pagingType": "simple_numbers", */
								"dom" : "t<'tableinfo'i<'tableSearch'p>l>",

								"language" : {//语言设置  
									"lengthMenu" : "每页显示 _MENU_ 条记录",
									"zeroRecords" : "没有检索到数据",
									"sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
									"info" : "没有数据",
									"oPaginate" : {
										"sFirst" : "首页",
										"sPrevious" : "前一页",
										"sNext" : "后一页",
										"sLast" : "尾页"
									},
									"search" : "",
									"searchPlaceholder" : "请输入关键字",
									"infoFiltered" : "(从  _MAX_ 记录中搜索出结果)",
									"infoEmpty" : "没有找到匹配的信息",
								},
								"columnDefs" : [ {
									"defaultContent" : "",
									"targets" : "_all"
								} ],
								"aoColumns" : [ 
									{ "data" : "user_id","className" : "user_id-td hidden-td"}, 
									{ "data" : "name", "className" : "name-td"},
									{ "data" : "bd_money", "className" : "bdtype_money-td"},
									{ "data" : "created_time", "className" : "created_time-td"},
									{ "data" : "model", "className" : "model-td" },
								],
							})

			function retrieveData(sSource, aoData, fnCallback) {
				$.ajax({
							url : sSource,//这个就是请求地址对应sAjaxSource
							data : {
								"user_id": ids,
								"type": type,
								"pageCount" : aoData[0].value,
								"startIndex" : aoData[3].value,
								"lineCount" : aoData[4].value,
							},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
							type : 'post',
							dataType : 'json',
							async : false,
							success : function(result) {
								fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
							},
							error : function(msg) {
							}
						});
			}
		};
		dataTable01();
		
		$("#btn-xiangqing").bind("change",function(event){
			$("#table-i-xiangqing").dataTable().fnDestroy();
			type= $(this).val(); 
			 dataTable01(); 
		});
	</script>
</body>
</html>
